/*
 * Copyright 2020 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/** Scrollback styling */

@import 'mixins';
@import 'Block';
@import 'Maximized';
@import '../Card/mixins';
@import '../Text/mixins';
@import '../Wizard/mixins';

$split-padding: 0.5em;
$split-gutter-gap: 6px;
$split-gutter-color: var(--color-stripe-01);
$split-bgcolor: var(--color-repl-background);

@include SplitContainer {
  display: grid;
  overflow: hidden;
  grid-gap: $split-gutter-gap;
  background-color: $split-gutter-color;
}

@include Scrollback {
  /* support for inner scrolling on ScrollbackBlockList */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/**
 * e.g. so that Terminal/getSize() can have a height that doesn't
   require computing the padding we may associate with the
   ScrollbackBlockList
 *
 */
@include ScrollbackBlockList {
  background-color: $split-bgcolor;

  --split-padding: #{$split-padding};
  padding: var(--split-padding) 0;

  /* these rules given us inner scrolling on ScrollbackBlockList */
  flex: 1;
  display: flex;
  overflow: hidden;
  @include ScrollbackBlockListInner {
    flex: 1;
    overflow: auto;
  }
}

@include MaximizedSplit {
  @include ScrollbackBlockList {
    @include FlushToContainer;
  }
  @include Block {
    @include FlushToContainer;
    @include BlockInput {
      @include FlushToContainer;
    }
    @include BlockOutput {
      @include FlushToContainer;
    }
  }
  @include Commentary {
    @include FlushToContainer;
  }
  @include CardBody {
    @include FlushToContainer;
  }

  /** Allow inner scrolling */
  @include ScrollbackBlockListInner {
    overflow: hidden;
  }
  @include BlockOutput {
    height: 100%;
  }
  @include CommandOutput {
    height: 100%;
    flex-wrap: unset;
  }
  @include CardBody {
    height: 100%;
  }
  @include TextContent {
    height: 100%;
  }
  @include Markdown {
    height: 100%;
  }
}
